[EuiBadge] Update styles to match latest design changes by tkajtoch · Pull Request #9302 · elastic/eui

tkajtoch · 2026-01-08T22:47:52Z

Summary

Resolves #9299

This PR updates the styles of the EuiBadge component to apply the latest design changes - rounded corners, updated paddings, and spacing between text and icon.

Please note that the VRTs highlight rather important changes that need approval from the design team:

the EuiBadge component is used for EuiComboBox items, which results in these having rounded corners
EuiSelectableList items use EuiBadge to display the ↩ icon

Both of the above could be reverted to the old, less rounded design if necessary, but that would mean more code changes.

Why are we making this change?

Part of the EuiBadge design update epic.

Screenshots #

Impact to users

These style changes are global, and there's no way to opt out of them. The changes themselves are minimal and limited to just the presentation layer. No logic changes have been implemented.

QA

Remove or strikethrough items that do not apply to your PR.

General checklist

Browser QA
- Checked in both light and dark modes
- Checked in both MacOS and Windows high contrast modes
  - (emulate forced colors if you do not have access to a Windows machine.)
- Checked in mobile
- Checked in Chrome, Safari, Edge, and Firefox
Code quality checklist
- Added or updated jest and cypress tests
- Updated visual regression tests
Release checklist
- A changelog entry exists and is marked appropriately
Designer checklist
- If applicable, file an issue to update EUI's Figma library with any corresponding UI changes. (This is an internal repo, if you are external to Elastic, ask a maintainer to submit this request)

… applied for the icon-only variant

...ges/eui/.loki/reference/chrome_desktop_Forms_EuiComboBox_Icons_And_Many_Options_Selected.png

.../reference/chrome_desktop_Forms_EuiSelectable_Subcomponents_EuiSelectableList_Playground.png

…class name string

packages/eui/src/components/badge/badge.styles.ts

weronikaolejniczak

✅ VRT updates are as expected. I ran them locally to double-check all tests pass.
✅ Code changes look as expected.

Thank you for adding the kitchen sink story 🙏🏻 I really like that pattern.

🟢 Good to go (especially because we're merging into a feature branch).

Co-authored-by: Tomasz Kajtoch <tomek@kajto.ch>

ek-so · 2026-01-09T12:58:54Z

packages/eui/src/components/badge/badge.styles.ts

      right: css`
        &:not(:only-child) {
-          ${logicalCSS('margin-left', euiTheme.size.xs)}
+          ${logicalCSS('margin-left', euiTheme.size.xxs)}


Hey @tkajtoch, thank you so much for the changes 🙏🏻 Looks perfect, but I have only one question/neat: I know in design it is 8px padding from left/right to the icon. But since here in code the border is counted too, it looks just a liiiittle too much, and I think we could go for 6px from both sider. Would that change be possible?

Good catch! Fixed in e86fe30

We don't have a token for 6px spacing, so the thing that made the most sense to me was subtracting the border width from the size s used for inline padding. The resulting inline padding is 7px, which I think looks good. Let me know!

Let's go with it, works for me!

A bit of a side question, but I wonder if we should actually introduce those tokens. For smaller elements they might make sense to perfectly balance the composition sometimes... cc @JoseLuisGJ
I wonder what do you both think? We we can continue discussion somewhere else of course, just wanted to mention in a context :)

I personally think it could be a little too much in terms of available options considering there are also values above base, but I'd love to hear others' opinion on this.

Let me merge this PR as-is then and we can discuss the sizing tokens somewhere else - how about a slack thread? :)

… to make the visual padding equal 8px

elasticmachine · 2026-01-11T21:41:44Z

💚 Build Succeeded

History

💚 Build #2387 succeeded e86fe30
💚 Build #2380 succeeded a632cca
💚 Build #2375 succeeded 96c568c
💚 Build #2366 succeeded 20f3816
💚 Build #2365 succeeded d58581c

cc @tkajtoch

elasticmachine · 2026-01-11T21:56:25Z

💚 Build Succeeded

Buildkite Build
Commit: f6389ca

History

💔 Build #5571 failed e86fe30
💚 Build #5565 succeeded a632cca
💚 Build #5561 succeeded 96c568c
💔 Build #5553 failed 20f3816

cc @tkajtoch

`112.0.0` ⏩ `112.1.0` [Questions? Please see our Kibana upgrade FAQ.](https://github.com/elastic/eui/blob/main/wiki/eui-team-processes/upgrading-kibana.md#faq-for-kibana-teams) ## Changes - Update `span_links_badge.tsx` conditional `onClick` props on `EuiBadge` to satisfy TypeScript 93d7fae - Update snapshots 24c2f9a ## Package updates ### `@elastic/eui` [`v112.1.0`](https://github.com/elastic/eui/releases/tag/v112.1.0) - Updated `timeline` icon glyph ([#9331](elastic/eui#9331)) - Updated `EuiContextMenu` panels to allow passing `data-test-subj`, `aria-label`, `className` and `css` props ([#9323](elastic/eui#9323)) - Added "zoom in" functionality to time window buttons in `EuiSuperDatePicker` ([#9325](elastic/eui#9325)) - Added `displayName` to `EuiButton`, `EuiButtonEmpty`, `EuiDescriptionList` and its sub-components, `EuiEmptyPrompt`, `EuiFlexGrid`, `EuiFlexItem`, `EuiIcon`, `EuiImage`, `EuiLoadingLogo`, `EuiPageSection`, `EuiPageSidebar`, `EuiPageTemplate` and its sub-components and `EuiPanel` ([#9324](elastic/eui#9324)) - Added `fill` prop (defaults to `false`) to `EuiBadge` component that controls whether the badge should use filled or non-filled (less intense) colors. By default, badges will now render as the non-filled variant. ([#9306](elastic/eui#9306)) - Updated EuiBadge design to have rounded corners and improved paddings ([#9302](elastic/eui#9302)) **Bug fixes** - Fixed non-virtualized `EuiSelectable` throwing SyntaxError when selecting an option ([#9326](elastic/eui#9326)) - Fixed an issue where `push` flyouts in a stacked layout calculated the content offset based on the hidden main flyout's width instead of the visible child flyout's width ([#9322](elastic/eui#9322)) ### @elastic/eui-theme-borealis [`v5.4.0`](https://github.com/elastic/eui/blob/16f9b31d753d963d7738049e7a176fcaf6e81e73/packages/eui-theme-borealis/changelogs/CHANGELOG_2026.md#v540) - Updated `badgeBackground` color token value to equal `backgroundFilledText` ([#9306](elastic/eui#9306)) ### @elastic/eui-docusaurus-theme [`v2.2.0`](https://github.com/elastic/eui/blob/16f9b31d753d963d7738049e7a176fcaf6e81e73/packages/docusaurus-theme/changelogs/CHANGELOG_2026.md#v220) - Added `extraFiles` prop to the `Demo` component. It allows to pass extra files that will be added to the Codesandbox instance. ([#9317](elastic/eui#9317)) - Updated the `IMPORT_REGEX` to include relative imports so that all imports are removed from the snippet. All imported references have to be passed to `Demo` in the `scope` prop. ([#9317](elastic/eui#9317)) --------- Co-authored-by: Tomasz Kajtoch <tomasz.kajtoch@elastic.co>

`112.0.0` ⏩ `112.1.0` [Questions? Please see our Kibana upgrade FAQ.](https://github.com/elastic/eui/blob/main/wiki/eui-team-processes/upgrading-kibana.md#faq-for-kibana-teams) ## Changes - Update `span_links_badge.tsx` conditional `onClick` props on `EuiBadge` to satisfy TypeScript 93d7fae - Update snapshots 24c2f9a ## Package updates ### `@elastic/eui` [`v112.1.0`](https://github.com/elastic/eui/releases/tag/v112.1.0) - Updated `timeline` icon glyph ([elastic#9331](elastic/eui#9331)) - Updated `EuiContextMenu` panels to allow passing `data-test-subj`, `aria-label`, `className` and `css` props ([elastic#9323](elastic/eui#9323)) - Added "zoom in" functionality to time window buttons in `EuiSuperDatePicker` ([elastic#9325](elastic/eui#9325)) - Added `displayName` to `EuiButton`, `EuiButtonEmpty`, `EuiDescriptionList` and its sub-components, `EuiEmptyPrompt`, `EuiFlexGrid`, `EuiFlexItem`, `EuiIcon`, `EuiImage`, `EuiLoadingLogo`, `EuiPageSection`, `EuiPageSidebar`, `EuiPageTemplate` and its sub-components and `EuiPanel` ([elastic#9324](elastic/eui#9324)) - Added `fill` prop (defaults to `false`) to `EuiBadge` component that controls whether the badge should use filled or non-filled (less intense) colors. By default, badges will now render as the non-filled variant. ([elastic#9306](elastic/eui#9306)) - Updated EuiBadge design to have rounded corners and improved paddings ([elastic#9302](elastic/eui#9302)) **Bug fixes** - Fixed non-virtualized `EuiSelectable` throwing SyntaxError when selecting an option ([elastic#9326](elastic/eui#9326)) - Fixed an issue where `push` flyouts in a stacked layout calculated the content offset based on the hidden main flyout's width instead of the visible child flyout's width ([elastic#9322](elastic/eui#9322)) ### @elastic/eui-theme-borealis [`v5.4.0`](https://github.com/elastic/eui/blob/16f9b31d753d963d7738049e7a176fcaf6e81e73/packages/eui-theme-borealis/changelogs/CHANGELOG_2026.md#v540) - Updated `badgeBackground` color token value to equal `backgroundFilledText` ([elastic#9306](elastic/eui#9306)) ### @elastic/eui-docusaurus-theme [`v2.2.0`](https://github.com/elastic/eui/blob/16f9b31d753d963d7738049e7a176fcaf6e81e73/packages/docusaurus-theme/changelogs/CHANGELOG_2026.md#v220) - Added `extraFiles` prop to the `Demo` component. It allows to pass extra files that will be added to the Codesandbox instance. ([elastic#9317](elastic/eui#9317)) - Updated the `IMPORT_REGEX` to include relative imports so that all imports are removed from the snippet. All imported references have to be passed to `Demo` in the `scope` prop. ([elastic#9317](elastic/eui#9317)) --------- Co-authored-by: Tomasz Kajtoch <tomasz.kajtoch@elastic.co>

tkajtoch added 3 commits January 8, 2026 22:55

feat(EuiBadge): update styles to match the new design

5bb86e2

test(EuiBadge): add styles assertions to ensure the custom padding is…

74013a2

… applied for the icon-only variant

test(EuiBadge): update VRTs

d58581c

tkajtoch requested a review from a team as a code owner January 8, 2026 22:47

tkajtoch changed the base branch from main to feat/eui-badge-updates January 8, 2026 22:48

tkajtoch self-assigned this Jan 8, 2026

tkajtoch added 2 commits January 9, 2026 00:15

chore(EuiBadge): Add kitchen sink story [REVERT ME]

df6b153

chore: add changelog

20f3816

tkajtoch commented Jan 8, 2026

View reviewed changes

...ges/eui/.loki/reference/chrome_desktop_Forms_EuiComboBox_Icons_And_Many_Options_Selected.png Show resolved Hide resolved

tkajtoch commented Jan 8, 2026

View reviewed changes

.../reference/chrome_desktop_Forms_EuiSelectable_Subcomponents_EuiSelectableList_Playground.png Show resolved Hide resolved

tkajtoch requested a review from ek-so January 8, 2026 23:22

weronikaolejniczak self-requested a review January 9, 2026 09:45

test(EuiSelectable): update snapshots to include changes in EuiBadge …

96c568c

…class name string

weronikaolejniczak reviewed Jan 9, 2026

View reviewed changes

packages/eui/src/components/badge/badge.styles.ts Outdated Show resolved Hide resolved

weronikaolejniczak approved these changes Jan 9, 2026

View reviewed changes

Update packages/eui/src/components/badge/badge.styles.ts

a632cca

Co-authored-by: Tomasz Kajtoch <tomek@kajto.ch>

ek-so reviewed Jan 9, 2026

View reviewed changes

tkajtoch added 2 commits January 11, 2026 21:38

chore(EuiBadge): subtract badge border width from inline padding size…

e86fe30

… to make the visual padding equal 8px

test(EuiBadge): fix padding-inline assertion

f6389ca

tkajtoch merged commit c485fce into elastic:feat/eui-badge-updates Jan 12, 2026
4 checks passed

acstll mentioned this pull request Jan 26, 2026

Upgrade EUI to v112.1.0 elastic/kibana#250407

Merged

Provide feedback

Saved searches

Use saved searches to filter your results more quickly

[EuiBadge] Update styles to match latest design changes#9302

[EuiBadge] Update styles to match latest design changes#9302
tkajtoch merged 9 commits intoelastic:feat/eui-badge-updatesfrom
tkajtoch:feat/eui-badge-styles-update

tkajtoch commented Jan 8, 2026 •

edited

Loading

Uh oh!

Uh oh!

Uh oh!

Uh oh!

weronikaolejniczak left a comment

Uh oh!

ek-so Jan 9, 2026

Uh oh!

tkajtoch Jan 11, 2026

Uh oh!

tkajtoch Jan 11, 2026

Uh oh!

ek-so Jan 12, 2026

Uh oh!

tkajtoch Jan 12, 2026

Uh oh!

elasticmachine commented Jan 11, 2026

Uh oh!

elasticmachine commented Jan 11, 2026

Uh oh!

Uh oh!

Reviewers

Assignees

Labels

Projects

Milestone

Development

Uh oh!

4 participants

Conversation

tkajtoch commented Jan 8, 2026 • edited Loading Uh oh! There was an error while loading. Please reload this page.

Uh oh!

Summary

Why are we making this change?

Screenshots #

Impact to users

QA

General checklist

Uh oh!

Uh oh!

Uh oh!

Uh oh!

weronikaolejniczak left a comment

Choose a reason for hiding this comment

Uh oh!

ek-so Jan 9, 2026

Choose a reason for hiding this comment

Uh oh!

tkajtoch Jan 11, 2026

Choose a reason for hiding this comment

Uh oh!

tkajtoch Jan 11, 2026

Choose a reason for hiding this comment

Uh oh!

ek-so Jan 12, 2026

Choose a reason for hiding this comment

Uh oh!

tkajtoch Jan 12, 2026

Choose a reason for hiding this comment

Uh oh!

elasticmachine commented Jan 11, 2026

💚 Build Succeeded

History

Uh oh!

elasticmachine commented Jan 11, 2026

💚 Build Succeeded

History

Uh oh!

Uh oh!

Reviewers

Assignees

Labels

Projects

Milestone

Development

Uh oh!

4 participants

tkajtoch commented Jan 8, 2026 •

edited

Loading